<template>
    <div>
        <el-input placeholder="请输入内容" v-model="input" clearable style="width: 18%; margin-left: 75%;"
            id="seainp"></el-input>
        <el-button type="primary" icon="el-icon-search" style="width: 4rem;" @click="search()"></el-button>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column fixed prop="employeeID" label="工号" width="120">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
                <template slot-scope="scope">
                    <div @click="handleNameClick(scope.row, scope.column, scope.$index)">
                        {{ scope.row.name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="department" label="部门" width="120">
            </el-table-column>
            <el-table-column prop="position" label="岗位" width="120">
            </el-table-column>
            <el-table-column prop="employeeStatusID" label="员工状态" width="120">
            </el-table-column>
            <el-table-column prop="entryDate" label="入职日期" width="120">
            </el-table-column>
            <el-table-column prop="regularDate" label="转正日期" width="120">
            </el-table-column>
            <el-table-column prop="lastAdjustmentDate" label="最近调整日期" width="120">
            </el-table-column>
            <el-table-column prop="salaryReason" label="调薪原因" width="120">
            </el-table-column>
            <el-table-column prop="totalSalary" label="工资合计" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <el-button type="text" @click="dialogFormVisible = true">调薪</el-button>
            </el-table-column>
        </el-table>

        <div class="block" style="margin-left: 65%; margin-top: 1rem;">
            <span class="demonstration"></span>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[15, 30, 60, 100]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="0">
            </el-pagination>
        </div>

        <!-- Form -->
        <el-dialog title="调薪" :visible.sync="dialogFormVisible">
            <el-form :model="form" :label-position="labelPosition">
                <el-form-item label="调薪模板" :rules="rules" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域" size="small">
                        <el-option label="默认定薪模板" value="500"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="调薪细则" prop="salary"></el-form-item>
                <el-form-item label="试用期工资" :label-width="formLabelWidth" style="margin-top: -2rem;">
                    <el-table :data="tableData1" border show-summary style="width: 100%; margin-top: -1rem;">
                        <el-table-column prop="wageItem" label="调薪项" width="180">
                        </el-table-column>
                        <el-table-column prop="before" label="调薪前">
                        </el-table-column>
                        <el-table-column prop="after" label="调薪后">
                            <!-- <el-input v-model="form.quarterlyBonus" autocomplete="off"></el-input> -->
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="转正后工资" :label-width="formLabelWidth" style="margin-top: 1rem;">
                    <el-table :data="tableData2" border show-summary style="width: 100%; margin-top: -1rem;">
                        <el-table-column prop="wageItem1" label="调薪项" width="180">
                        </el-table-column>
                        <el-table-column prop="before1" label="调薪前">
                        </el-table-column>
                        <el-table-column prop="after1" label="调薪后">
                            <!-- <el-input v-model="form.quarterlyBonus" autocomplete="off"></el-input> -->
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="调薪原因" :label-width="formLabelWidth" style="margin-top: 1rem;">
                    <el-select v-model="why" placeholder="请选择调薪原因">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="调薪生效日期" :label-width="formLabelWidth" style="margin-top: 1rem;">
                    <div class="block">
                        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>

                <el-form-item label="备注" :label-width="formLabelWidth" style="margin-top: 1rem;">
                    <div class="block">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                    </div>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>

        <!--  薪资信息表-->
        <el-drawer title="我是标题" :visible.sync="particulars" :with-header="false" size="50%">
            <div style="margin-left: 5rem; margin-top: 2rem; font-size: 1rem; font-weight: bold;">薪资信息</div>
            <div style="margin-left: 5rem; margin-top: 1rem;">合计：50000元</div>
            <el-form :model="form" :inline="true" style="width: 90%; margin-top: 1rem;" :disabled="true">
                <el-form-item label="工号" :label-width="formLabelWidth">
                    <el-input v-model="form.employeeID" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-input v-model="form.department" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="岗位" :label-width="formLabelWidth">
                    <el-input v-model="form.position" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="基本工资" :label-width="formLabelWidth">
                    <el-input v-model="form.basicSalary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="岗位工资" :label-width="formLabelWidth">
                    <el-input v-model="form.positionSalary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="职务工资" :label-width="formLabelWidth">
                    <el-input v-model="form.jobSalary" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="住房补贴" :label-width="formLabelWidth">
                    <el-input v-model="form.housingAllowance" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="交通补贴" :label-width="formLabelWidth">
                    <el-input v-model="form.transportationAllowance" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="餐补" :label-width="formLabelWidth">
                    <el-input v-model="form.mealAllowance" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="绩效工资" :label-width="formLabelWidth">
                    <el-input v-model="form.performanceBonus" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="季度奖" :label-width="formLabelWidth">
                    <el-input v-model="form.quarterlyBonus" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="全勤奖" :label-width="formLabelWidth">
                    <el-input v-model="form.fullAttendanceBonus" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="推荐奖" :label-width="formLabelWidth">
                    <el-input v-model="form.referralBonus" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="销售提成" :label-width="formLabelWidth">
                    <el-input v-model="form.salesCommission" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
export default {
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        //根据name进行搜索搜索
        search() {
            let sou = document.getElementById('seainp').value;
            this.newtable = []
            console.log('搜索功能' + sou)
            this.tableData.forEach(name => {
                if (sou == name.name) {
                    console.log(name.name)
                    // this.newtable = []
                    this.newtable.push(name)
                } else {
                    console.log('未找到')
                }
            });
            console.log(this.newtable)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleNameClick(row, column, index) {

            this.particulars = true;
        },

    },

    data() {
        return {
            formLabelWidth: '120px',
            input: '',
            value1: '',
            desc: '',
            size: '',
            particulars: false,
            tableData: [{
                employeeID: '1001',
                name: '王小虎',
                department: '开发部',
                position: '开发工程师',
                employeeStatusID: '在职',
                entryDate: '2018-01-01',
                regularDate: '2018-06-01',
                lastAdjustmentDate: '2018-06-01',
                salaryReason: '年终奖',
                totalSalary: '50000'
            }],
            tableData1: [{
                wageItem: '基本工资',
                before: '10000',
                after: '15000',
            }, {
                wageItem: '岗位工资',
                before: '10000',
                after: '15000',
            }, {
                wageItem: '职务工资',
                before: '10000',
                after: '15000',
            }],
            tableData2: [{
                wageItem1: '基本工资',
                before1: '3000',
                after1: '15000',
            }, {
                wageItem1: '岗位工资',
                before1: '0',
                after1: '0',
            }, {
                wageItem1: '职务工资',
                before1: '0',
                after1: '0',
            }],
            dialogFormVisible: false,
            form: {
                salary: '',
            },
            formLabelWidth: '120px',
            labelPosition: 'top',

            options: [{
                why: '选项1',
                label: '入职定薪'
            }, {
                why: '选项2',
                label: '入职核定'
            }, {
                why: '选项3',
                label: '转正'
            }, {
                why: '选项4',
                label: '晋升'
            }, {
                why: '选项5',
                label: '调动'
            }, {
                why: '选项6',
                label: '年中调薪'
            }, {
                why: '选项7',
                label: '年度调薪'
            }, {
                why: '选项8',
                label: '特别调薪'
            }, {
                why: '选项9',
                label: '其他'
            }],
            why: ''

        }
    }
}
</script>

<style scoped></style>